<template>
  <div>
    <div class="modeltop">
      <a-modal
        width="1100px"
        title="团学单位外出活动申请表"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOks"
        @cancel="handleCancel"
      >
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <table border="1px" cellspacing="1" align="center">
            <colgroup span="6" width="100px"></colgroup>
            <col width="100px" />
            <tr height="60px" align="center">
              <td>申请部门</td>
              <td colspan="3">
                <br />
                <a-form-model-item ref="departNames" prop="departNames">
                  <a-input
                    @click="openModal"
                    placeholder="请点击选择部门"
                    v-model="form.departNames"
                    readOnly
                    :disabled="disabled"
                    @blur="
                      () => {
                        $refs.departNames.onFieldBlur()
                      }
                    "
                  >
                    <a-icon slot="prefix" type="cluster" title="部门选择控件" />
                    <a-icon v-if="form.departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空" />
                  </a-input>
                </a-form-model-item>
              </td>
              <td>申请日期</td>
              <td colspan="2"><a-date-picker @change="onChange" /></td>
            </tr>
            <tr height="60px" align="center">
              <td>学生负责人姓名</td>
              <td colspan="3">
                <br />
                <a-form-model-item ref="userNames" prop="userNames">
                  <a-input-search
                    v-model="form.userNames"
                    placeholder="请先选择用户"
                    readOnly
                    unselectable="on"
                    @search="onSearchDepUser"
                    @blur="
                      () => {
                        $refs.userNames.onFieldBlur()
                      }
                    "
                  >
                    <a-button slot="enterButton" :disabled="disabled">选择用户</a-button>
                  </a-input-search>
                </a-form-model-item>
                <j-select-user-by-dep-modal
                  ref="selectAA"
                  :modal-width="modalWidth"
                  :multi="multi"
                  @ok="selectOK"
                  :user-ids="value"
                  @initComp="userinitComp"
                />
              </td>
              <td>联系电话</td>
              <td colspan="2">
                <br />
                <a-form-model-item ref="userPhone" prop="userPhone">
                  <a-input
                    v-model.number="form.userPhone"
                    placeholder="请输入手机号码"
                    @blur="
                      () => {
                        $refs.userPhone.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>带队老师姓名</td>
              <td colspan="3">
                <br />
                <a-form-model-item ref="teacherNames" prop="teacherNames">
                  <a-input-search
                    v-model="form.teacherNames"
                    placeholder="请先选择用户"
                    readOnly
                    unselectable="on"
                    @search="onSearchDepUserBB"
                    @blur="
                      () => {
                        $refs.teacherNames.onFieldBlur()
                      }
                    "
                  >
                    <a-button slot="enterButton" :disabled="disabled">选择用户</a-button>
                  </a-input-search>
                  <j-select-user-by-dep-modal
                    ref="selectBB"
                    :modal-width="modalWidth"
                    :multi="multi"
                    @ok="selectOKQ"
                    :user-ids="value"
                    @initComp="initComp"
                  />
                </a-form-model-item>
              </td>
              <td>联系电话</td>
              <td colspan="2">
                <br />
                <a-form-model-item ref="teacherPhone" prop="teacherPhone">
                  <a-input
                    placeholder="请输入手机号码"
                    v-model.number="form.teacherPhone"
                    @blur="
                      () => {
                        $refs.teacherPhone.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>活动名称 （全称）</td>
              <td colspan="6">
                <textarea type="text" placeholder="请输入活动名称" v-model="form.activityName" />
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>活动时间 （年 月 日）</td>
              <td colspan="3">
                <a-range-picker @change="onChangetow" />
              </td>
              <td>出行方式（如需校车自行申请）</td>
              <td colspan="2">
                <br />
                <a-form-model-item ref="tripMode" prop="tripMode">
                  <a-input
                    placeholder="请输入出行方式"
                    v-model="form.tripMode"
                    @blur="
                      () => {
                        $refs.tripMode.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>活动地点（详细）</td>
              <td colspan="6"><textarea v-model="form.activityAddress" /></td>
            </tr>
            <tr height="60px" align="center">
              <td>外出事由</td>
              <td colspan="6">
                <a-form-model-item ref="service" prop="service">
                  <textarea
                    v-model="form.service"
                    @blur="
                      () => {
                        $refs.service.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
              </td>
            </tr>

            <tr height="120px" align="center">
              <td width="67" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">参与活动人</span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">员组成及人数</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
              </td>
              <td colspan="6">
                <a-form-model-item ref="peopleCounting" prop="peopleCounting">
                  <textarea
                    v-model="form.peopleCounting"
                    @blur="
                      () => {
                        $refs.peopleCounting.onFieldBlur()
                      }
                    "
                  ></textarea>
                </a-form-model-item>
              </td>
            </tr>
            <tr>
              <td width="67" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">申请单位学</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt">生</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">负责人意</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt">见</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
              </td>
              <td width="395" valign="top" colspan="6">
                <div
                  class="MsoNormal"
                  style='display:block;min-height:5em;text-align:justify;font-family:"font-size:10.5pt;'
                >
                  <div style="font-family: 仿宋_GB2312; font-size: 12pt" v-html="task2.opinion"></div>
                </div>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
                >
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt; margin-left: 60px">(&nbsp;签名&nbsp;):</span>
                  <br />
                  <span style='margin-left: 400px;"font-family: 仿宋_GB2312; font-size: 12pt"'>
                    年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日
                  </span>
                </p>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
                ></p>
              </td>
            </tr>
            <tr>
              <td width="67" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">申请单位</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">指导老师审</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt">核</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
              </td>
              <td width="395" valign="top" colspan="6">
                <div
                  class="MsoNormal"
                  style='display:block;min-height:5em;text-align:justify;font-family:"font-size:10.5pt;'
                >
                  <div style="font-family: 仿宋_GB2312; font-size: 12pt" v-html="task2.opinion"></div>
                </div>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
                >
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt; margin-left: 60px"
                    >(&nbsp;签名盖章&nbsp;):</span
                  >
                  <br />
                  <span style='margin-left: 400px;"font-family: 仿宋_GB2312; font-size: 12pt"'>
                    年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日
                  </span>
                </p>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
                ></p>
              </td>
            </tr>
            <tr>
              <td width="67" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">校团委书记</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt">团</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt">审批</span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span
                  ><span style="font-family: 仿宋_GB2312; font-size: 12pt"></span>
                </p>
              </td>
              <td width="395" valign="top" colspan="6">
                <div
                  class="MsoNormal"
                  style='display:block;min-height:5em;text-align:justify;font-family:"font-size:10.5pt;'
                >
                  <div style="font-family: 仿宋_GB2312; font-size: 12pt" v-html="task2.opinion"></div>
                </div>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
                >
                  <span style="font-family: 仿宋_GB2312; font-size: 12pt; margin-left: 60px"
                    >(&nbsp;签名盖章&nbsp;):</span
                  >
                  <br />
                  <span style='margin-left: 400px;"font-family: 仿宋_GB2312; font-size: 12pt"'>
                    年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日
                  </span>
                </p>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
                ></p>
              </td>
            </tr>
            <tr height="60px" align="center">
              <td>备注</td>
              <td colspan="6">
                <a-form-model-item ref="remark" prop="remark">
                  <textarea v-model="form.remark"></textarea>
                </a-form-model-item>
              </td>
            </tr>
          </table>
        </a-form-model>
      </a-modal>
    </div>
    <j-select-depart-modal
      ref="innerDepartSelectModal"
      :modal-width="modalWidth"
      :multi="multi"
      :rootOpened="rootOpened"
      :depart-id="form.departIds"
      @ok="handleOKe"
      @initComp="initCompGood"
    />
    <JSelectUserByDepModal />
  </div>
</template>

<script>
import JSelectDepartModal from '../../../components/jeecgbiz/modal/JSelectDepartModal.vue'
import JSelectUserByDepModal from '../../../components/jeecgbiz/modal/JSelectUserByDepModal'
import JSelectUserByDep from '../../../components/jeecgbiz/JSelectUserByDep'
import XSelectUserByDepModal from '../../../components/extends/XSelectUserByDepModal.vue'
import { setoutside, setoutsideList } from '../../../api/api'
import Outingtable from './Outingtable.vue'
import moment from 'moment'
export default {
  name: 'OutingFrom',
  components: {
    XSelectUserByDepModal,
    JSelectDepartModal,
    JSelectUserByDepModal,
    JSelectUserByDep,
    Outingtable,
  },
  // props: ['visible'],
  props: {
    editableFiexd: {
      type: Object,
      default: () => {
        return {}
      },
    },
    visible: {
      type: Boolean,
      default: true,
      required: false,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    modalWidth: {
      type: Number,
      default: 500,
      required: false,
    },
    multi: {
      type: Boolean,
      default: false,
      required: false,
    },
    rootOpened: {
      type: Boolean,
      default: true,
      required: false,
    },
    modalWidth: {
      type: Number,
      default: 1250,
      required: false,
    },
    value: {
      type: String,
      required: false,
    },

    multi: {
      type: Boolean,
      default: true,
      required: false,
    },
    editable: {
      type: Boolean,
      default: true,
    },
  },
  mixins: [JSelectUserByDep],
  data() {
    return {
      dateFormat: 'YYYY-MM-DD',
      confirmLoading: false,

      condition: '',
      form: {
        // Nameofactivity: '', // 活动全名
        departNames: '', // 部门
        departIds: '', // 部门id
        studentId: '', // 负责人id
        userNames: '', // 负责人名字
        teacherNames: '', // 老师名字
        teacherId: '', // 老师id
        item: '', // 申请时间
        activityDateStart: '', // 活动开始时间
        activityDateEnd: '', // 活动结束时间
        activityAddress: '', // 活动地点详情
        peopleCounting: '', // 参与活动人员组成及人数
        userPhone: '', // 负责人电话
        teacherPhone: '', // 指导老师电话
        service: '', // 外出事由
        remark: '', // 备注
        tripMode: '', // 出行方式
        activityName: '', // 活动名称
      },
      rules: {
        departNames: [{ required: true, message: '请选择部门', trigger: 'blur' }],
        userNames: [{ required: true, message: '请选择用户', trigger: 'blur' }],
        userPhone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        teacherNames: [{ required: true, message: '请选择用户', trigger: 'blur' }],
        teacherPhone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        tripMode: [{ required: true, message: '请输入出行方式', trigger: 'blur' }],
        service: [{ required: true, message: '请输入外出事由', trigger: 'blur' }],
        peopleCounting: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    ;(this.form.departIds = this.value), (this.form.userIds = this.value)
  },

  methods: {
    setInstructor(data) {
      this.formData.instructor = data.name
    },
    // 选中的老师信息
    selectOKQ(rows, idstr) {
      console.log('当前选中用户1', rows)
      let teacherId = ''
      for (let i = 0; i < rows.length; i++) {
        console.log(rows[i].id)
        teacherId = rows[i].id
        this.form.teacherId = teacherId // 老师的id
      }
      console.log('当前选中用户ID1', idstr)
      if (!rows) {
        this.userNames = ''
        this.userIds = ''
      } else {
        let temp = ''
        for (let item of rows) {
          temp += ',' + item.realname
        }
        this.form.teacherNames = temp.substring(1)
        this.form.teacherIds = idstr
        // console.log(this.form.teacherNames)
      }
      // this.$emit('change', this.userIds)
      // this.$emit('selected', { name: this.userNames, value: this.userIds })
    },

    selectOK(rows, idstr) {
      console.log('当前选中用户', rows)
      let studentId = ''
      for (let i = 0; i < rows.length; i++) {
        console.log(rows[i].id)
        studentId = rows[i].id
        this.form.studentId = studentId // 学生的id
      }
      console.log('当前选中用户ID', idstr)
      if (!rows) {
        this.userNames = ''
        this.userIds = ''
      } else {
        let temp = ''
        for (let item of rows) {
          temp += ',' + item.realname
        }

        this.form.userNames = temp.substring(1)
        this.form.userIds = idstr
      }
      // this.$emit('change', this.userIds)
      // this.$emit('selected', { name: this.userNames, value: this.userIds })
    },
    userinitComp(userNames, userIds, rows) {
      ;(this.form.userNames = userNames), this.$emit('selected', { name: userNames, value: userIds, rows: rows })
    },
    initComp(teacherNames, userIds, rows) {
      ;(this.form.teacherNames = teacherNames),
        this.$emit('selected', { name: teacherNames, value: userIds, rows: rows })
    },
    onSearchDepUser() {
      this.$refs.selectAA.showModal()
    },

    onSearchDepUserBB() {
      this.$refs.selectBB.showModal()
    },

    moment,
    // 选择日期
    onChange(date, dateString) {
      this.item = dateString
    },
    onChangetow(date, dateString) {
      this.form.activityDateStart = dateString[0]
      this.form.activityDateEnd = dateString[1]
      console.log(dateString[0])
      console.log(dateString[1])
    },
    handleOks(e) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功')
          setoutside({
            activityAddress: this.form.activityAddress, // 活动地点详情
            activityName: this.form.activityName, //活动名称详细
            activityPerson: this.form.peopleCounting, //参与活动人员组成及人数
            departName: this.form.departNames, // 申请的部门  ?
            departId: this.form.departIds, // 申请的部门id
            director: this.form.userNames, // 负责人
            directorId: this.form.studentId, // 负责人id
            directorPhone: this.form.userPhone, //负责人电话号码
            instructor: this.form.teacherNames, // 带队老师名字
            instructorId: this.form.teacherId, // 带队老师id
            instructorPhone: this.form.teacherPhone, // 带队老师id
            reason: this.form.service, // 外出事由
            remark: this.form.remark, // 备注 ?
            tripMode: this.form.tripMode, // 出行方式
            activityDateStart: this.form.activityDateStart, // 活动开始时间
            activityDateEnd: this.form.activityDateEnd, // 活动结束时间
          }).then((res) => {
            setTimeout(() => {
              this.$emit('handlevisible', false)
              this.confirmLoading = false
            }, 2000)
            this.$emit('resetSearchForm')
          })
        } else {
          this.$message.warning('请输入必填信息')
          return false
        }
      })
    },
    // 取消
    handleCancel(e) {
      this.$emit('handlevisible', false)
    },
    openModal() {
      // 部门组件
      this.$refs.innerDepartSelectModal.show()
    },
    // 申请的部门
    handleOKe(rows, idstr) {
      console.log(idstr)
      let value = ''
      if (!rows && rows.length <= 0) {
        this.form.departNames = ''
        this.form.departIds = ''
      } else {
        value = rows.map((row) => row[this.customReturnField]).join(',')
        this.form.departNames = rows.map((row) => row['departName']).join(',')
        this.form.departIds = idstr
      }
      this.$emit('change', value)
      this.$emit('selected', { name: this.form.departNames, value: this.form.departIds })
    },
    getDepartNames() {
      return this.form.departNames
    },
    handleEmpty() {
      this.handleOKe('')
    },
    initCompGood(departNames) {
      this.form.departNames = departNames

      //update-begin-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填
      //TODO 当返回字段为部门名称时会有问题,因为部门名称不唯一
      //返回字段不为id时，根据返回字段获取id
      if (this.customReturnField !== 'id' && this.value) {
        const dataList = this.$refs.innerDepartSelectModal.dataList
        console.log('this.value', this.value)
        this.form.departIds = this.value
          .split(',')
          .map((item) => {
            const data = dataList.filter((d) => d[this.customReturnField] === item)
            return data.length > 0 ? data[0].id : ''
          })
          .join(',')
      }
      //update-end-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填
    },
  },
  computed: {
    task2() {
      if (this.formData && this.formData.approveRecords) {
        return this.formData.approveRecords[1] || {}
      } else {
        return {}
      }
    },
  },
}
</script>
 
<style lang = "less" scoped>
.modeltop {
  width: 70% !important;
}
textarea {
  width: 100%;
  height: 100%;
  resize: none;
  outline-color: #d1e9ff;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
}
/deep/.ant-input {
  height: 30px;
}
.onlods {
  display: flex;
  margin-left: 700px;
  .btn {
    margin-top: 20px;
  }
  .btnok {
    margin-left: 10px;
    margin-top: 20px;
  }
}
input[type='text'] {
  border-style: none;
}
input[type='number'] {
  border-style: none;
}
input[type='datetime'] {
  border-style: none;
}
input[type='email'] {
  border-style: none;
}
select {
  border-style: none;
}
</style>